import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import styles from './index.less';
import request from '../../utils/request';
import qs from 'qs';

export default function Login() {
  const onFinish = (values: any) => {
    request({
      url: 'api/auth/oauth/token',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      method: 'post',
      transformRequest: [
        function (data) {
          return qs.stringify({
            grant_type: 'mobile_password',
            scope: 'customer',
            client_id: 'client_hyyq02',
            client_secret: 'hyyq02',
            ...values,
          });
        },
      ],
    }).then((res) => {});
  };

  return (
    <div className={styles.box}>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: 'Please input your Username!' }]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="Username"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: 'Please input your Password!' }]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="Password"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <a className="login-form-forgot" href="">
            Forgot password
          </a>
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            Log in
          </Button>
          Or <a href="">register now!</a>
        </Form.Item>
      </Form>
    </div>
  );
}
